<template>
  <div id="app">

    <!--  头部导航  -->
    <div class="header">
      <Header></Header>
    </div>

    <!-- 主体内容 -->
    <div class="body">
      <router-view></router-view>
    </div>

  </div>
</template>

<script>
import Header from "@/components/home/Header"

export default {
  components: {
    Header
  },
  created() {
    /**
     * 从 LocalStorage 获取登录状态
     */
    let isLogin = window.localStorage.getItem("isLogin");
    if(isLogin){    //已经登录
      window.sessionStorage.setItem("vuex", JSON.stringify(this.$store.state))
    }
    /**
     * 监听刷新事件,如果 F5 刷新了,就将数据写入到 sessionStorage
     */
    window.addEventListener('unload', () => {
      window.sessionStorage.setItem("vuex", JSON.stringify(this.$store.state))
    })

    /**
     * 从 sessionStorage 获取 vuex,如果值不为 null,对应的将值写入到对应的 state 中去
     */
    let data = window.sessionStorage.getItem("vuex");
    if (data != null) {
      let store = JSON.parse(data);
      /**
       * 根据项目具体设置
       * this.$store.commit("setName",store.user.name)
       */
      this.$store.commit('setCurrentTab', store.web.currentTab)
      this.$store.commit('setCurrentTopic', store.course.currentTopic)

      let isLogin = window.localStorage.getItem("isLogin");
      if (isLogin) {
        //放入到vuex中
        let userId = window.localStorage.getItem("userId");
        let token = window.localStorage.getItem("token");
        let userStringify = window.localStorage.getItem("userStringify");
        let userInfo = JSON.parse(userStringify);
        this.$store.commit('setIsLogin', isLogin)
        this.$store.commit('setUserId', userId)
        this.$store.commit('setToken', token)
        this.$store.commit('setUserInfo', userInfo)
      }

    }
  }
}
</script>

<style lang="less">
* {
  margin: 0px;
  padding: 0px;
}

// 文字上下左右居中
.tvc {
  text-align: center;
  vertical-align: middle;
}

//调试 bgc
.bgc {
  background-color: #ee7f95 !important;
}

.border {
  border: 1px solid #000000;
}

@header-height: 70px;
#app {
  display: flex;
  flex-direction: column;

  div {
  }

  .header {
    min-height: @header-height;
    //box-shadow: 0px 0px 2px 2px #000;
  }

  .body {
    min-height: calc(100vh - @header-height);
    //background-color: aliceblue;
  }

  .footer {

  }
}
</style>
